<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表</title>
</head>
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>

<style type="text/css">
    .anniu{
text-align: center;
    }
    p {
       font-size: 24px;
    text-align: center;
        color: #d4d3d3;
    }
   div  h1 {
       border-left: 7px solid #ed2653;
       color: #ED2653;
    }
   h5{
       color: #bebdbd;
   }
    #piaofu{
        position: absolute;
        top: 8%;
        left: 395px;
        right: -70px;
        bottom: 98%;
        width: 140px;
        height: 140px;
        border-radius: 70px;
        background-color: #ed2653;
        color: #fff;
        font-size: 60px;
        /* font-weight: 900; */
        text-align: center;
        line-height: 140px;
    }

    input {
        width: 350px;
        outline:none;
        border-bottom-style: solid;
        border-top-width:0px;
        border-bottom-width:2px;
        border-left-width:0px;
        border-right-width:0px;
    }
.first-name:focus {
    color: red;
}

    .outer-box{
        margin:50px auto;
        width: 465px;
        /*height: auto;*/
    }
    .back-panel{
        width: 445px;
        background-color: rgba(255, 255, 255, 0.51);
        height: 50px;
        margin: -10px auto;
        border-radius: 10px;
    }
    .front-panel{
        position: relative;
        margin-top: -40px;
        background-color: #ffffff;
        border-radius: 10px;
        /*width: 100%;*/
        height: 555px;
    }

    #name-label{
        position: absolute;
        color: #a3a3a3;
        font-size: 16px;
        transition: 0.25s all ease;
        top:0px;
        left: 60px;
        z-index: 1;
        pointer-events: none;
    }

    #name-input:focus +label{
        top:-25px
    }
    #passwrod-label{
        position: absolute;
        color: #a3a3a3;
        font-size: 16px;
        transition: 0.25s all ease;
        top:0px;
        left: 60px;
        z-index: 1;
        pointer-events: none;
    }
    #passwrod-input:focus +label{
        top:-25px
    }
</style>

<body style="background-color: aqua; text-align: center;">
<div class="outer-box">
    <div class="back-panel">

    </div>
    <div class="front-panel">
        <br>
        <br>
        <h1 style="margin-right:250px" >LOGIN</h1><br/>
        <br>
        <br>
        <div class="form-group"  style="position: relative">
            <input class="first-name" id="name-input" type="text" >
            <label id="name-label">name</label>
        </div>
        <br />
        <br/>
        <div class="form-group" style="position: relative" >
            <input class="first-name" type="password"  id="passwrod-input" >
            <label id="passwrod-label">password</label>
        </div>
        <br />
        <div class="anniu">
            <button type="submit" class="btn btn-default btn-lg" style="width:240px;
             height: 70px;">GO</button>
        </div>
        <br /><br /><br /><br />
        <p>Forgot your password?</p>
        <div id="piaofu">
            +
        </div>
        <!--<div id="piaofu1">-->
            <!--&lt;!&ndash;<img src="img/tiao.jpg">&ndash;&gt;-->
        <!--</div>-->
    </div>
</div>
</body>
</html>